<template>
  <div class="goods">
    <!-- 详情物品 -->
    <div class="banner">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item
          v-for="item in getGoodsInfoById.goodsResourceDtoList"
          :key="item.id"
        >
          <view class="swiper-item uni-bg-red">
            <img class="imgs" :src="item.goodsImgUrl" alt="" />
          </view>
        </swiper-item>
      </swiper>
    </div>
    <!-- 优惠，价格，活动倒计时 -->
    <div class="time">
      <div>
        <span>{{
          getGoodsInfoById.limitedTimeDiscountDTO.limitedTimeDiscountName
        }}</span>
        <span>距结束</span>
      </div>
      <div>
        <span
          >¥{{
            getGoodsInfoById.limitedTimeDiscountDTO.limitedTimeDiscountPrice
          }}</span
        >
        <span>{{ d }}天{{ h }}：{{ m }}：{{ s }}</span>
      </div>
    </div>
    <!-- 商品名称 -->
    <div class="goodsName">
      <span>{{ getGoodsInfoById.goodsName }}</span>
    </div>
    <!-- 商品选择 -->
    <div class="shop">
      <div>
        <span>已选</span>
        <span>{{ getSpecStockInfoByGoodsId.stockList[3].specDetailName }}</span>
      </div>
      <div><span>></span></div>
    </div>
    <div class="comments">
      <div>
        <div>
          <span>评论</span>
          <span
            >({{
              getGoodsCommentPage.commentCountInfoDtoList[0].commentNumber
            }})</span
          >
        </div>
        <div><span>查看全部</span><span>></span></div>
      </div>
      <!-- 评论 -->
      <div>
        <dl
          v-for="item in getGoodsCommentPage.commentInfoList"
          :key="item.mebId"
        >
          <dt>
            <div>
              <span><img :src="item.headImgUrl" alt="" /></span>
              <span>{{ item.nickName }}</span>
              <span>{{ item.score }}</span>
            </div>
            <div>{{ item.commentTime }}</div>
          </dt>
          <dd>{{ item.goodsComment }}</dd>
        </dl>
      </div>
    </div>
    <div class="title">为你推荐</div>
    <div class="listRecommendFrontGoodsListDTO">
      <dl v-for="item in listRecommendFrontGoodsListDTO" :key="item.goodsId">
        <dt><img :src="item.goodsImgUrl" alt="" /></dt>
        <dd>
          <p>{{ item.goodsName }}</p>
          <p>¥{{ item.minGoodsPrice }}</p>
        </dd>
      </dl>
    </div>
    <div class="strings">
      <rich-text :nodes="strings"></rich-text>
    </div>
  </div>
</template>

<script>
import { getCenter } from "../../../server/index";
export default {
  data() {
    return {
      goodId: "",
      getGoodsInfoById: {}, // 详情物品
      getGoodsCommentPage: {}, // 详情评论
      listRecommendFrontGoodsListDTO: {}, // 详情页为你推荐
      getSpecStockInfoByGoodsId: {}, // 点击立即购买
      getGoodsDetailById: {},
      bannerList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 4000,
      duration: 500,
      d: 0,
      h: 0,
      m: 0,
      s: 0,
      strings: {},
    };
  },
  onLoad(option) {
    //option为object类型，会序列化上个页面传递的参数
    console.log(option.id); //打印出上个页面传递的参数。
    if (option.id) {
      this.goodId = option.id;
    }
  },
  mounted() {
    // 详情物品
    getCenter(
      `xbu/front/goods/getGoodsInfoById?activitySource=xbuXcx&appVer=1.0.0&channelId=10001&platType=14&goodsId=${this.goodId}&mebId=`
    ).then((ok) => {
      if (ok.retcode == 0) {
        // console.log(ok.result);
        this.getGoodsInfoById = ok.result;
      }
    });
    // 详情评论
    getCenter(
      `xbu/front/goods/getGoodsCommentPage?activitySource=xbuXcx&appVer=1.0.0&channelId=10001&platType=14&goodsId=${this.goodId}&commentType=0&pageNo=1&pageSize=2`
    ).then((ok) => {
      if (ok.retcode == 0) {
        // console.log(ok.result);
        this.getGoodsCommentPage = ok.result;
      }
    });
    // 详情页为你推荐
    getCenter(
      `xbu/front/goods/listRecommendFrontGoodsListDTO?activitySource=xbuXcx&appVer=1.0.0&channelId=10001&platType=14&spuId=${this.goodId}`
    ).then((ok) => {
      if (ok.retcode == 0) {
        // console.log(ok);
        this.listRecommendFrontGoodsListDTO = ok.result;
      }
    });
    // 点击立即购买
    getCenter(
      `xbu/front/goods/getSpecStockInfoByGoodsId?activitySource=xbuXcx&appVer=1.0.0&channelId=10001&platType=14&goodsId=${this.goodId}`
    ).then((ok) => {
      if (ok.retcode == 0) {
        // console.log(ok.result);
        this.getSpecStockInfoByGoodsId = ok.result;
      }
    });
    getCenter(
      `xbu/front/goods/getGoodsDetailById?activitySource=xbuXcx&appVer=1.0.0&channelId=10001&platType=14&goodsId=${this.goodId}&receiveWay=2&unionId=8FAZmOqq9vCR9zFBafIJzLCFqnncNGcMGGtBgjyHWBg%3D`
    ).then((ok) => {
      if (ok.retcode == 0) {
        console.log(ok.result.goodsDetail);
        let arr = ok.result.goodsDetail
          .replace(/\<img/gi, '<img style="width:100%;height:440rpx;"')
          .replace(/\<p>/gi, '<p class="p_class">');
        this.strings = arr;
      }
    });
    setInterval(() => {
      this.fun();
    }, 1000);
  },
  methods: {
    fun() {
      let time = +new Date();
      let leftTime =
        +new Date(this.getGoodsInfoById.limitedTimeDiscountDTO.endTime) - time;
      let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
      let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
      let m = Math.floor((leftTime / 1000 / 60) % 60);
      let s = Math.floor((leftTime / 1000) % 60);
      this.d = d;
      this.h = h < 10 ? "0" + h : h;
      this.m = m < 10 ? "0" + m : m;
      this.s = s < 10 ? "0" + s : s;
    },
  },
};
</script>

<style lang="scss" scoped>
.goods {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .title {
    text-align: center;
    margin-top: 20rpx;
    padding: 30rpx 0;
    font-size: 40rpx;
  }
  .banner {
    width: 100%;
    height: 720rpx;
    .swiper {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 720rpx;
      }
    }
  }
  .time {
    width: 100%;
    height: 150rpx;
    background: #fff6e9;
    display: flex;
    flex-direction: column;
    align-items: center;
    > div {
      flex: 1;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      span {
        display: inline-block;
        padding: 0 20rpx;
      }
      span:nth-child(2) {
        color: #e0bd91;
      }
    }
  }
  .goodsName {
    width: 100%;
    margin: 0 auto;
    font-size: 30rpx;
    padding: 38rpx 0;
    background: #fff;
    span {
      width: 90%;
      padding-left: 40rpx;
      display: inline-block;
      margin: 0 auto;
    }
  }
  .shop {
    width: 100%;
    height: 100rpx;
    background: #fff;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      padding: 0 25rpx;
      > span:nth-child(1) {
        color: #969696;
        display: inline-block;
        padding-right: 20rpx;
      }
    }
  }
  .comments {
    margin-top: 20rpx;
    width: 100%;
    background: #fff;
    > div:nth-child(1) {
      padding-right: 20rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        padding: 0 25rpx;
        span:nth-child(2) {
          display: inline-block;
          margin-left: 20rpx;
          color: #969696;
        }
      }
    }
    > div:nth-child(2) {
      width: 100%;

      dl {
        border-top: 1rpx #e5e5e5 solid;
        width: 100%;
        height: 155rpx;
        dt {
          width: 90%;
          margin: 15rpx auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          div {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          div {
            color: #a3a3a3;
            span:nth-child(2) {
              display: inline-block;
              padding: 0 20rpx;
            }
          }
          img {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
          }
        }
        dd {
          width: 90%;
          margin: 15rpx auto;
        }
      }
    }
  }
  .listRecommendFrontGoodsListDTO {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    dl {
      width: 30%;
      height: 400rpx;
      overflow: hidden;
      border: solid 1rpx #eee;
      margin-top: 20rpx;
      dt {
        width: 100%;
        height: 220rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      dd {
        p {
          margin: 20rpx 10rpx;
        }
        p:nth-child(1) {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 25rpx;
        }
        p:nth-child(2) {
          font-weight: 600;
        }
      }
    }
  }
  .strings {
    width: 90%;
    margin: 0 auto;
  }
}
</style>